<template>
  <div class="content">
    <a-row>
      <a-col :span="10">
        <a-card style="width: 300px">
          <template slot="actions" class="ant-card-actions">
            <a-icon key="setting" type="setting" />
            <a-icon key="swap" type="swap" />
            <a-icon key="ellipsis" type="ellipsis" />
          </template>
          <a-card-meta title="张三" description="见贤思齐焉..">
            <a-avatar :size="50" slot="avatar" src="https://ku-m.cn/logo.jpg" />
          </a-card-meta>

          <a-menu
            style="width: 256px"
            mode="vertical"
            :defaultOpenKeys="['my_script']"
            @click="choice_menu"
          >
            <a-menu-item key="my_script">
              <a-icon type="heart" theme="twoTone" />我的脚本
            </a-menu-item>
            <a-menu-item key="add_script">
              <a-icon type="plus-square" theme="twoTone" />添加脚本
            </a-menu-item>
            <a-menu-item key="open_script">
              <a-icon type="cloud" theme="twoTone" />公开脚本组
            </a-menu-item>
            <a-menu-item key="my_info">
              <a-icon type="contacts" theme="twoTone" />个人资料
            </a-menu-item>
          </a-menu>
        </a-card>
      </a-col>
      <a-col :span="12">
        <My-Script v-if="current_choice_menu == 'my_script'" />
        <Add-Script v-if="current_choice_menu == 'add_script'" />
      </a-col>
    </a-row>
    <div class="footer">
      © 2019 - 2021
      <a href="http://ku-m.cn/">枯木的博客</a>
      Powered by Electron & Vue
    </div>
  </div>
</template>

<script>
import Add_Script from '@/views/home/Add_Script.vue'
import My_Script from '@/views/home/My_Script.vue'

export default {
  name: 'Home',
  components: {
    'Add-Script': Add_Script,
    'My-Script': My_Script
  },
  data () {
    return {
      current_choice_menu: '',
    }
  },
  created () {
  },
  methods: {

    choice_menu (data) {
      this.current_choice_menu = data.key
    },

  },
}
</script>


<style scope>
.content .ant-menu {
  margin-top: 20px;
  height: 350px;
}
.content .ant-menu .ant-card-meta-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
